<template>
<div class="page-container-padding">
  <div>
    <el-button type="primary" size="mini" icon="el-icon-plus" @click="showEditVariety = true">新增</el-button>
  </div>

  <!-- 显示品种列表 -->
  <div style="margin-top: 10px;">
    <el-table border stripe :data="varietyList">
      <el-table-column prop="name" label="品种名称"></el-table-column>
      <el-table-column prop="workload_short_message" label="短讯通(条/月)"></el-table-column>
      <el-table-column prop="workload_strategy" label="策略(条/月)"></el-table-column>
      <el-table-column prop="workload_investment_plan" label="投资计划(个/月)"></el-table-column>
      <el-table-column prop="workload_lecture" label="演讲培训(场/月)"></el-table-column>
      <el-table-column prop="workload_article" label="研究文章(篇/月)"></el-table-column>
      <el-table-column prop="expire" label="有效期"></el-table-column>
    </el-table>
  </div>

  <!-- 编辑品种的弹窗 -->
  <el-dialog :visible.sync="showEditVariety" title="品种管理">
  <div style="padding: 15px;">
    <el-form label-width="70px">
      <el-form-item label="名称"><el-input size="mini" v-model="varietyName" placeholder="品种名称"></el-input></el-form-item>
      <el-form-item label="短讯通"><el-input size="mini" v-model="workloadShortMessage" placeholder="短讯通量/月"></el-input></el-form-item>
      <el-form-item label="投顾策略"><el-input size="mini" v-model="workloadStrategy" placeholder="投顾策略/月"></el-input></el-form-item>
      <el-form-item label="投资计划"><el-input size="mini" v-model="workloadExPlan" placeholder="投资计划/月"></el-input></el-form-item>
      <el-form-item label="演讲培训"><el-input size="mini" v-model="workloadLecture" placeholder="演讲培训/月"></el-input></el-form-item>
      <el-form-item label="文章撰写"><el-input size="mini" v-model="workArticle" placeholder="文章撰写/月"></el-input></el-form-item>
      <el-form-item label="有效期"><el-date-picker v-model="expireDate"></el-date-picker> </el-form-item>
    </el-form>
  </div>
    <div slot="footer">
      <el-button type="primary" size="mini" @click="toSaveWorkVariety">保存</el-button>
      <el-button type="infor" size="mini"  @click="showEditVariety = false">取消</el-button>
    </div>
  </el-dialog>
</div>
</template>
<script>
import { getWorkVareity,addWorkVareity } from '@/api/departmentWork/workSetting'
import { datetimeToStr } from '@/utils/datetimeUtils'
export default{
  data(){
    return {
      showEditVariety: false,

      varietyName: '',  // 品种名称
      expireDate: new Date(2099,11,31), // 有效期
      workloadShortMessage: 5, // 工作量
      workloadStrategy: 1,
      workloadExPlan: 0.3334,
      workloadLecture: 0.1667,
      workArticle: 0.5,  // 文章3种各一篇
      varietyList: []
    }
  },
  mounted(){
    this.queryVarietyList()
  },
  methods: {
    queryVarietyList(){
      getWorkVareity().then(res => {
        console.log(res)
        this.varietyList = res.data
      })
    },

    // 保存品种
    toSaveWorkVariety(){
      if (!this.varietyName){
        this.$baseMessage('请填写品种名称!', 'error')
        return
      }
      const vData = {
        name: this.varietyName,
        expire: datetimeToStr(this.expireDate, true, '-'),
        workload_short_message: this.workloadShortMessage,
        workload_strategy: this.workloadStrategy,
        workload_investment_plan: this.workloadExPlan,
        workload_lecture: this.workloadLecture,
        workload_article: this.workArticle
      }
      addWorkVareity(vData).then(res => {
        if (res.code === 201){
          this.$baseMessage('创建品种成功','success')
          this.showEditVariety = false
          this.varietyName = ''
          this.workload = null
        }else{
          this.$baseMessage(res.msg,'error')
        }
      })
    }
  }
}
</script>
<style>

</style>